<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
            font-size: 60px;
        }
    .box1{
        background-color: #bfa;
    }
    .box2{
        background-color: orange;
       /* 定位（position）
             -定位一种更高级的布局手段
             -通过定位可以将元素摆放到页面的任意位置
             -使用position属性来设置定位
                可选值
                   static  默认值，元素是静止的没有开启定位
                   relative 开启元素的相对定位
                   absolute 开启元素的绝对定位
                   fixed 开启元素的固定定位
                   sticky 开启元素的粘滞定位

            相对定位
                当元素的position设置成relative时开启了元素的相对定位
                    特点
                    -元素开启相对定位后如果不设置偏移量不会发生任何变化
                    -参照元素在文档流中的位置
                    -相对元素会提升元素的层级
                    -相对定位不会脱离文档流
                    -相对定位不会改变元素的性质

            偏移量（offset）
                    -当元素开启定位后，可以通过偏移量来设置元素的位置
                    top
                        -定位元素怒和定位位置上边的距离
                        值越大，定位元素向下移动
                    bottom
                        -定位元素和定位位置下边的距离
                        值越大，定位元素向上移动
                    
                    定位垂直方向的位置由top和bottom两个属性来控制
                    通常只会设置其一

                    left
                       -定位元素和定位位置的左侧距离
                       值越大，元素越靠右

                    right
                       -定位元素和定位位置右侧的距离
                       值越大元素越靠左

                    定位元素的水平方向的位置由left和right控制
                    通常情况下设置其一

        */
        position: relative;
        left: 200px;
        top: -200px;

    }
    .box3{
        
        background-color: yellow;
        /* background: yellow; */
    }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>